<!--评论的子组件-->
<template>
    <div class="comment-container">
        <h3>发表评论</h3>
        <textarea v-model="msg" placeholder="随你喜欢，发不发布看我（限3个字）" maxlength="120">

        </textarea>
        <mt-button type="primary" size="large" >发表评论</mt-button>
        <div class="cmt-container" >
            <div class="cmt">
                <div class="title">
                    1楼 用户：匿名用户 发表时间：2222-22-22 22：22：22
                </div>
                <div class="content">
                    喜欢吃喝
                </div>
            </div>
            <div class="cmt" v-for="(item,i) in commentList">
                <div class="title">
                    {{i+2}}楼 用户：{{item.name}} 发表时间：{{item.date}} 22：22：22
                </div>
                <div class="content">
                    {{item.content==='undefined||""'?'他很懒，又或者他不喜欢吃喝玩乐，只爱学习':item.content}}
                </div>
            </div>
        </div>


        <!--<mt-button type="danger" size="large" plain>加载更多</mt-button>-->
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                commentList: [],
                msg: '',
                list:[]
            }
        },
        created() {
            this.getComment();
        },
        methods: {
            getComment() {
                this.$http.get('categories/' + this.catId + '/shops').then(result => {
                    if (result.status === 200) {
                        this.commentList = this.commentList.concat(result.body[this.id].comments);
                    } else {
                        Toast('网络较差，请稍候再试')
                    }
                })
            },
        },
        //对方禁止提交
        // postComment(){
        //     if (this.msg.trim().length===0){
        //         Toast('内容不能为空')
        //     }
        //     this.$http.post('categories/'+this.catId+'/shops',{
        //         content:this.msg.trim()
        //     },{emulateJSON:true}).then(function (res) {
        //         if (res.status === 200) {
        //             var cmt = {name:'匿名用户',date:Date.now(),content:this.msg.trim()};
        //             this.comments.unshift(cmt);
        //             this.msg = "";
        //         }
        //     })
        // }
        props: ['id', 'catId']
    }
</script>

<style lang="less" scoped>
    .comment-container {
        h3 {
            font-size: 20px;
            height: 30px;
            border-bottom: 1px solid #ccc;
        }

        textarea {
            margin: 0px 3px;
            height: 85px;
            font-size: 13px;
            width: 98%;
        }

        .cmt-container {
            .cmt {
                .title {
                    padding-left: 3px;
                    font-size: 14px;
                    background-color: #ccc;
                    height: 30px;
                    line-height: 30px;
                    margin: 3px 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;
                }

                .content {
                    padding: 0 3px;
                    text-indent: 2em;
                }
            }

        }

    }
</style>